<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/cookie.js"></script>
    <script src="./js/promiseAjax.js"></script>
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
    <div class=" container top">
        <div class="content">
            <div class="userinfo">
                <a href="login.html">登录</a>
                <a href="register.html">注册</a>
            </div>
            <div class="tolist">
                <a href="list.html">列表页</a>
            </div>
        </div>
    </div>
    <div class="container goodsContainer">
        <div class="content">
            <ul class=" goods clearfix">
                <!-- <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li> -->
                <!-- <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li>
                <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li>
                <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li>
                <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li>
                <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li>
                <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li>
                <li>
                    <img src="./11.png" alt="">
                    <p>价格</p>
                    <p>描述</p>
                </li> -->
            </ul>
        </div>


    </div>
</body>
<script>
    var username=getCookie('username')
    var userinfo=document.querySelector('.userinfo')
    if(username){
        userinfo.innerHTML=`
            欢迎<b style = "color:red"><a href="usercenter.html">${username}</a></b>
            <a href="javascript:;" onclick="logout()">退出</a>
        `
    }
    function logout(){
        if(confirm('确定退出？')){
            removeCookie('username')
            //还原a标签
            userinfo.innerHTML=`
                <a href="login.html">登录</a>
                <a href="register.html">注册</a>
            `
        }


    }
    //商品数据
    var page = 1
    var pageSize=8
    var flag= true
    var goods=document.querySelector('.goods')
    getgoods()
    function getgoods(){
        if(!flag){
            return
        }
        flag=false
        request({
        //模板字符串形式拼上去
        url:`/api/goods/getAllGoods/${page}/${pageSize}`,
    }).then(res=>{
        console.log(res)
        //遍历数据
        var data=res.data.data
        if(data.length===0){
            return
        }
        //拼接html数据
        var html=''
        data.forEach(goods=>{
            html+=`
                <li>
                    <a style="display:block;width:100%;height:100%" href="detail.html?id=${goods._id}">
                        <img src="${goods.img_big_logo}" alt="">
                        <p>${goods.price}</p>
                        <p class="goodstitle">${goods.title}</p>
                    </a>
                </li>
            `
        })
        goods.innerHTML+=html
        page++
        flag=true
    })
    }
    //懒加载  把上面的放函数里 需要加载就调用一下函数
    var goodsContainer=document.querySelector('.goodsContainer')
    var windowtop=document.querySelector('.top')
    window.onscroll=function(){
        var t = document.documentElement.scrollTop ||document.body.scrollTop
        if(t+innerHeight >goodsContainer.offsetHeight+windowtop.offsetHeight-200){
            getgoods()
        }
    }



</script>
</html>